<script lang="ts" setup>
  defineProps({
    icon: {
      type: String,
      default: ''
    },
    button: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    back: {
      type: Boolean,
      default: false
    },
    danger: {
      type: Boolean,
      default: false
    },
      gap: {
          type: Boolean,
          default: false
      },
    light: {
      type: Boolean,
      default: false
    }
  })
</script>

<template>
  <div :class="['ic-btn','wi', 'dd-'+icon,button?'nor-btn':'',back?'nor-btn-back':'',disabled?'ic-dis':'',danger?'ic-dg':'',gap?'ic-gap':'']" />
</template>

<style scoped lang="scss">
 .ic-btn{
   flex:none;
   display: block;
 }

 .nor-btn{
   color:#555;
   cursor:pointer;

   &:hover{
     color:$f-color-light;
   }
 }
 .ic-gap{
   margin-right: 5px;
 }
 .ic-dis{
   opacity: .5;
   pointer-events: none;
 }
 .ic-dg{
   color:red!important;
   &:hover{
     color:red!important;
     font-weight: 600;
   }
 }
 .nor-btn-back{
   padding: 0 3px;
   box-sizing: border-box;
   border-radius: 2px;

   &:hover{
     background: $c-color-ct1 ;
   }
 }

</style>
